import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import ModelSettingsForm from "@/components/settings/ModelSettingsForm";

export default function SettingsPage() {
  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
          设置
        </h1>
        <p className="text-sm text-gray-500 dark:text-gray-400">
          管理您的账户和应用偏好
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* 模型设置 */}
        <div className="col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>模型设置</CardTitle>
              <CardDescription>配置对话和嵌入模型</CardDescription>
            </CardHeader>
            <CardContent>
              <ModelSettingsForm />
            </CardContent>
          </Card>
        </div>

        {/* API设置 */}
        <Card>
          <CardHeader>
            <CardTitle>API设置</CardTitle>
            <CardDescription>配置您的API密钥和相关设置</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label
                htmlFor="api-key"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                OpenAI API密钥
              </label>
              <div className="flex items-center gap-2">
                <input
                  type="password"
                  id="api-key"
                  placeholder="sk-..."
                  className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                  defaultValue="sk-••••••••••••••••••••••••••••••"
                />
                <Button variant="outline" size="sm">
                  编辑
                </Button>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                用于与OpenAI API进行通信
              </p>
            </div>

            <div className="space-y-2">
              <label
                htmlFor="model"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                默认模型
              </label>
              <select
                id="model"
                className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                defaultValue="gpt-4o"
              >
                <option value="gpt-4o">GPT-4o</option>
                <option value="gpt-4">GPT-4</option>
                <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
              </select>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                用于生成回复的默认语言模型
              </p>
            </div>

            <Button className="w-full">保存API设置</Button>
          </CardContent>
        </Card>

        {/* 应用偏好 */}
        <Card>
          <CardHeader>
            <CardTitle>应用偏好</CardTitle>
            <CardDescription>自定义应用的外观和行为</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium text-gray-900 dark:text-white">
                主题
              </label>
              <div className="flex gap-2">
                <button
                  className="flex h-10 w-10 items-center justify-center rounded-md bg-white text-xs ring-2 ring-blue-500 dark:bg-gray-950"
                  type="button"
                >
                  浅色
                </button>
                <button
                  className="flex h-10 w-10 items-center justify-center rounded-md bg-gray-950 text-white text-xs dark:bg-gray-800"
                  type="button"
                >
                  深色
                </button>
                <button
                  className="flex h-10 w-10 items-center justify-center rounded-md bg-gradient-to-r from-white to-gray-950 text-xs"
                  type="button"
                >
                  系统
                </button>
              </div>
            </div>

            <div className="space-y-2">
              <label
                htmlFor="language"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                语言
              </label>
              <select
                id="language"
                className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                defaultValue="zh-CN"
              >
                <option value="zh-CN">简体中文</option>
                <option value="en-US">English (US)</option>
                <option value="ja-JP">日本語</option>
              </select>
            </div>

            <div className="flex items-center justify-between">
              <label className="text-sm font-medium text-gray-900 dark:text-white">
                声音提示
              </label>
              <div className="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700">
                <span className="absolute left-1 h-4 w-4 rounded-full bg-white transition-transform"></span>
              </div>
            </div>

            <Button className="w-full">保存偏好设置</Button>
          </CardContent>
        </Card>

        {/* 知识库设置 */}
        <Card>
          <CardHeader>
            <CardTitle>知识库设置</CardTitle>
            <CardDescription>配置知识库相关参数</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label
                htmlFor="chunk-size"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                文档分块大小
              </label>
              <input
                type="number"
                id="chunk-size"
                className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                defaultValue="1000"
              />
              <p className="text-xs text-gray-500 dark:text-gray-400">
                文档处理时的分块大小（字符数）
              </p>
            </div>

            <div className="space-y-2">
              <label
                htmlFor="chunk-overlap"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                分块重叠
              </label>
              <input
                type="number"
                id="chunk-overlap"
                className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                defaultValue="200"
              />
              <p className="text-xs text-gray-500 dark:text-gray-400">
                相邻分块间的重叠字符数
              </p>
            </div>

            <Button className="w-full">保存知识库设置</Button>
          </CardContent>
        </Card>

        {/* 账户设置 */}
        <Card>
          <CardHeader>
            <CardTitle>账户设置</CardTitle>
            <CardDescription>管理您的个人账户信息</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label
                htmlFor="email"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                电子邮件
              </label>
              <input
                type="email"
                id="email"
                className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                defaultValue="user@example.com"
              />
            </div>

            <div className="space-y-2">
              <label
                htmlFor="name"
                className="text-sm font-medium text-gray-900 dark:text-white"
              >
                姓名
              </label>
              <input
                type="text"
                id="name"
                className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
                defaultValue="张三"
              />
            </div>

            <div className="pt-2">
              <Button className="w-full">保存账户设置</Button>
            </div>

            <div className="pt-4">
              <Button variant="outline" className="w-full text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950 dark:hover:text-red-300">
                退出登录
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
} 